<template>
  <div class="login">
    <div class="login-nav">
      <div class="logo">
        <img src="../assets/images/home_active.png" alt />
      </div>
      <div class="nav-middle">Luckin Coffee</div>
      <div class="nav-right" @click="turntoHome()">先逛一逛</div>
    </div>
    <!--  -->
    <div class="hello">
      <div>欢迎回来!</div>
      <div>Please login to your accounts</div>
    </div>
    <!-- 登录注册框 -->
    <van-form>
      <van-field
      v-model="userLog.phone" 
      name="手机号" 
      label="手机号" 
      placeholder="手机号" 
      autocomplete="off" />
      <van-field
      v-model="userLog.password" 
      type="text" 
      name="密码" 
      label="密码" 
      placeholder="密码必须为字母开头" 
      autocomplete="off" 
      right-icon="eye"
      />
      <div class="forget">忘记密码?</div>
      <div class="submit-btn ">
        <van-button round block type="info" color="#0c34ba" @click="userLogin">登录</van-button>
      </div>
      <div class="submit-btn ">
        <van-button round block type="default" @click="showPopup" >注册</van-button>
      </div>
    </van-form>
    <!-- 注册弹出框 -->
    <van-popup v-model="show" position="bottom" closeadble  >
      <div>注册</div>
      <van-field 
      v-model="userReg.phone"
      name="手机号" 
      label="手机号" 
      placeholder="手机号" 
      autocomplete="off" />
      <van-field 
      v-model="userReg.password"
      type="text" 
      name="密码" 
      label="密码" 
      placeholder="密码必须为字母开头" 
      autocomplete="off" 
      right-icon="eye"
      />
      <van-field 
      v-model="userReg.nickName"
      type="text" 
      name="昵称"
      label="昵称" 
      placeholder="昵称" 
      autocomplete="off" 
      />
            <div class="submit-btn">
        <van-button round block type="default" @click="userRegister" >注册</van-button>
      </div>
    </van-popup>
  </div>
</template>
<script>
export default {
  name: "Login",
  data() {
    return {
      //弹出层默认关闭
      show:false,
      //注册信息
      userReg:{
        phone:"",
        password:"",
        nickName:"",
      },
      //登录信息
      userLog:{
          phone:"",
          password:"",
        },
    };
  },
  //生命周期
  created() {},
  methods: {
    //点击注册显示注册框
    showPopup(){
      this.show = true;
    },
    userRegister(){
      //发送请求
      this.axios({
        //请求类型
        method:"POST",
        //请求地址
        url:"/register",
        data:{
          appkey: this.appkey,
          phone:this.userReg.phone,
          password:this.userReg.password,
          nickName:this.userReg.nickName,
        },
      }).then((res)=>{
        console.log(res);
        if(res.data.code == 100){
          this.$toast.success(res.data.msg);
          this.show=false;
        }
        else if(res.data.code == 102){
          this.$toast.fail(res.data.msg);
        }
      
      })
    },
    userLogin(){
           this.axios({
        //请求类型
        method:"POST",
        //请求地址
        url:"/login",
        data:{
          appkey: this.appkey,
          phone:this.userLog.phone,
          password:this.userLog.password,
        },
      }).then((res)=>{
        console.log(res);
        if(res.data.code == 200){
          this.$toast.success(res.data.msg);
          localStorage.setItem("tk__",res.data.token);
          //登录成功后跳转到首页
          this.$router.push({name:"Home"});
        }
        else if(res.data.code == 202){
          this.$toast.fail(res.data.msg);
        }
      });
    },
    turntoHome(){
      this.$router.push({name:"Home"});
    }
  },
};
</script>
<style lang="less" scoped>
.login{
  background-color: white;
}
.login .login-nav {
  display: flex;
  height: 50px;
  padding: 0 15px;
  align-items: center;
}
.login-nav{
  width: 100%;
  height: 150px;
}
.logo{
  flex: 3;
}
.logo img{
  width: 30px;
  height: 30px;
}
.login .submit-btn {
  margin: 16px;
}
.nav-middle{
  flex: 9;
  font-size: 18px;
  font-weight: bolder;
}
.nav-right{
  color: blue;
  font-weight: bolder;
  flex: 3;
}
.hello{
  padding-top: 100px;
  padding-bottom: 70px;
  padding-left: 15px;
  font-size: 30px;
}
.hello div:nth-child(2){
  padding-top: 20px;
  font-size: 17px;
  color: gray;
}
.forget{
  text-align: right;
  padding-top: 10px;
  padding-right: 15px;
}
.submit-btn{
  padding: 25px 0;
}
</style>